<template>
	<div class="detail">
		<nav-bar />
		<detail-comtent 
			:item="detailData" 
			:commend="commend" 
			:userinfo="userInfo" 
			:comment="comment"
			:isCollection="isCollection"
			:isFollow="isFollow"
			@collection="collection"
			@follow="follow"
		/>
		
		<van-dialog 
			v-model="show" 
			title="评论" 
			show-cancel-button 
			@confirm="confirm"
			@cancel="cancel"
		>
			<van-field 
				v-model="comment_content" 
				placeholder="请输入内容"
			/>
		</van-dialog>
	</div>
</template>

<script>
	import bus from '@/utils/eventBus.js'
	import { 
		getArticleDetail, 
		getCommend, 
		getUserInfo, 
		getComment,
		postComment,
		getCollection,
		updateCollection,
		getFollow,
		updateFollow
	} from '@/api'
	import NavBar from '@/components/common/NavBar.vue'
	import DetailComtent from './detail-content.vue'
	export default {
		name: 'Detail',
		data() {
			return {
				// 文章详情信息对象
				detailData: {},
				// 推荐文章数据数组
				commend: [],
				// 用户信息对象
				userInfo: {},
				// 文章评论信息
				comment: [],
				// 评论文本
				comment_content: '',
				// 评论回复id
				parent_id: '',
				// 显示弹出层
				show: false,
				// 是否收藏
				isCollection: false,
				// 是否关注
				isFollow: false
			}
		},
		created() {
			this._getArticleDetail()
			this._getCommend()
			this._getUserInfo()
			this._getComment()
			this._getCollection()
			
			// comment-title组件发表评论通知事件
			bus.$on('PostComment', (content) => {
				this._postComment(content)
			})
			
			// comment和comment-reply组件回复评论通知事件
			bus.$on('replyComment', (id) => {
				this.show = true
				this.parent_id = id
			})
		},
		methods: {
			// 获取文章详情信息
			_getArticleDetail() {
				const id = this.$route.query.id
				getArticleDetail(id)
				.then(res => {
					console.log('文章详情信息',res)
					const data = res.data[0]
					this.detailData = data
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 获取推荐文章
			_getCommend() {
				// 发送请求
				getCommend()
				.then(res => {
					console.log('推荐文章',res)
					if (res.status !== 200) return this.$toast.fail('请求异常,请重新尝试!')
					this.commend = res.data
				})
				.catch(err => {
					return this.$toast.fail('请求异常,请重新尝试!')
				})
			},
			// 获取用户信息
			_getUserInfo() {
				const id = window.localStorage.getItem('id')
				// 判断是否登录
				if (!id) return
				// 发送请求
				getUserInfo(id)
				.then(({data: res}) => {
					console.log('用户信息',res[0])
					this.userInfo = res[0]
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 获取文章评论
			_getComment() {
				const id = this.$route.query.id
				// 发起请求
				getComment(id)
				.then(res => {
					console.log('文章评论',res)
					if (res.status !== 200 ) return this.$toast.fail('请求异常,请重新尝试!')
					this.comment = this.recursive(res.data)
				})
				.catch(err => {
					return this.$toast.fail('请求异常,请重新尝试!')
				})
			},
			// 递归
			recursive(data) {
				function fn (temp) {
					let arr = []
					for (var i = 0; i < data.length; i++) {
						if (data[i].parent_id == temp) {
							arr.push(data[i])
							data[i].child = fn(data[i].comment_id)
						}
					}
					return arr
				}
				return fn(null)
			},
			// 发表评论
			_postComment(content, parent_id = null) {
				const date = new Date()
				let m = date.getMonth() + 1
				let d = date.getDate()
				if (m < 10) {
					m = '0' + m
				}
				if (d < 10) {
					d = '0' + d
				}
				const time = `${m}-${d}`
				// 用户id
				const userId = window.localStorage.getItem('id')
				// 拼接参数
				const data = {
					comment_content: content,
					comment_date: time,
					parent_id,
					article_id: this.$route.query.id
				}
				// 发送请求
				postComment(userId,data)
				.then(res => {
					console.log('评论了',res)
					if (res.status !== 200) return this.$toast.fail('评论失败,请重新尝试!')
					this.$toast.success('评论成功！')
					this._getComment()
					this.comment_content = ''
				})
				.catch(err => {
					return this.$toast.fail('请求异常,请重新尝试!')
				})
			},
			// 提交弹出层事件
			confirm() {
				const { comment_content, parent_id } = this
				if (!comment_content.trim()) return this.$toast('内容不能为空！')
				this._postComment(comment_content, parent_id)
			},
			// 关闭弹出层事件
			cancel() {
				this.comment_content = ''
				this.parent_id = ''
			},
			// 获取文章是否收藏
			_getCollection() {
				const user_id = window.localStorage.getItem('id'),
							article_id = this.$route.query.id,
							tokenSrting = window.localStorage.getItem('token')
				// 判断是否登录
				if (!tokenSrting) return 
				// 发起请求
				getCollection(user_id,{
					article_id
				})
				.then(({data:res}) => {
					console.log('是否收藏',res)
					this.isCollection = res.success
				})
			},
			// 收藏文章
			collection() {
				const user_id = window.localStorage.getItem('id'),
							article_id = this.$route.query.id,
							tokenSrting = window.localStorage.getItem('token')
				// 判断是否登录
				if (!tokenSrting) return this.$toast('请先登录')
				// 加载中
				this.$toast.loading({
					message: '加载中...',
					forbidClick: true
				})
				// 发起请求
				updateCollection(user_id,{
					article_id
				})
				.then(res => {
					console.log(res)
					if (res.data.code !== 200) return this.$toast.fail('请求异常,请重新尝试!')
					this.$toast.success(res.data.msg)
					this.isCollection = !this.isCollection
				})
				.catch(err => {
					return this.$toast.fail('请求异常,请重新尝试!')
				})
			},
			// 获取作者是否关注
			_getFollow() {
				const user_id = window.localStorage.getItem('id'),
							sub_id = this.detailData.userid,
							tokenSrting = window.localStorage.getItem('token')
				// 判断是否登录
				if (!tokenSrting) return 
				// 发起请求
				getFollow(user_id,{
					sub_id
				})
				.then(({data:res}) => {
					console.log('是否关注',res)
					this.isFollow = res.success
				})
			},
			// 关注用户
			follow() {
				const user_id = window.localStorage.getItem('id'),
							sub_id = this.detailData.userid,
							tokenSrting = window.localStorage.getItem('token')
				// 判断是否登录
				if (!tokenSrting) return this.$toast('请先登录')
				// 加载中
				this.$toast.loading({
					message: '加载中...',
					forbidClick: true
				})
				// 发起请求
				updateFollow(user_id,{
					sub_id
				})
				.then(res => {
					console.log(res)
					if (res.data.code !== 200) return this.$toast.fail('请求异常,请重新尝试!')
					this.$toast.success(res.data.msg)
					this.isFollow = !this.isFollow
				})
				.catch(err => {
					return this.$toast.fail('请求异常,请重新尝试!')
				})
			},
		},
		components: {
			NavBar,
			DetailComtent
		},
		watch: {
			$route() {
				this._getArticleDetail()
				this._getCommend()
				this._getComment()
			},
			detailData() {
				this.$nextTick(() => {
					this._getFollow()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		background-color: #fff;
	}
</style>